<%--
  Created by IntelliJ IDEA.
  User: jaovo
  Date: 2020/5/13
  Time: 8:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true" %>
<html>
<head>
    <title>用户管理</title>
    <%@include file="/common/header.jsp"%>
    <style>
        .ivu-form-item{
            margin-bottom: 0px;
        }
    </style>
</head>
<body>
<div id="root">
    <Collapse value="Panel">
        <Panel name="Panel">
            多条件查询
            <p slot="content">
                <i-form :label-width="60" inline>
                    <Form-Item label="用户编码">
                        <i-input type="text" v-model="userVo.userCode"></i-input>
                    </Form-Item>
                    <Form-Item label="用户名字">
                        <i-input type="text" v-model="userVo.userName"></i-input>
                    </Form-Item>
                    <Form-Item label="用户角色">
                        <i-Select v-model="userVo.userRole" remote :remote-method="getrolelist" style="width: 120px;">
                            <i-Option :value="''">---请选择---</i-Option>
                            <i-Option v-for="item in rolelist" :value="item.id" :key="item.id">{{item.roleName}}</i-Option>
                        </i-Select>
                    </Form-Item>
                    <Form-Item label="出生日期">
                        <Date-Picker type="date" placeholder="start date" style="width: 200px" v-model="userVo.stime"></Date-Picker>
                        <Date-Picker type="date" placeholder="end date" style="width: 200px" v-model="userVo.etime"></Date-Picker>
                    </Form-Item>
                    <i-button type="primary" @click="pageNo=1;getuserlist();">搜索</i-button>
                </i-form>
            </p>
        </Panel>
    </Collapse>
    <card>
        <i-Button type="primary"  @click="">修改用户</i-Button>
        <i-Button type="error"  @click="">删除用户</i-Button>
    </card>
    <i-table :columns="columns" :data="data" border stripe height="400">
        <template slot-scope="{row,index}" slot="gender">
            {{row.gender==1?"男":"女"}}
        </template>
        <template slot-scope="{row,index}" slot="roleName">
            {{row.role.roleName}}
        </template>
        <template slot-scope="{ row, index }" slot="action">
            <i-Button type="primary"  @click="">修改</i-Button>
            <i-Button type="error"  @click="">删除</i-Button>
            <i-Button type="info"  @click="">查看</i-Button>
            <i-Button type="success"  @click="">上传</i-Button>
        </template>
    </i-table>
    <template>
        <Page :total="total"
              show-total
              show-elevator
              :page-size="pageSize"
              style="margin-left: 330px;"
              :current.sync="pageNo"
              show-sizer
              :page-size-opts="[5,10,15,20]"
              @on-page-size-change="pageSize=arguments[0];getuserlist();"
              @on-change="getuserlist"/>
    </template>
</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            columns:[
                {title:"用户编码",key:"userCode"},
                {title:"用户名字",key:"username"},
                {title:"性别",slot:"gender"},
                {title:"出生日期",key:"birthday"},
                {title:"电话号码",key:"phone"},
                {title:"用户地址",key:"address"},
                {title:"用户角色",slot:"roleName"},
                {title:"用户证件",key:"attachPath"},
                {title:"操作",slot:"action",width:160}
            ],
            data:[],
            userVo:{},
            rolelist:[],
            total:50,
            pageSize:5,
            pageNo:1
        },
        mounted(){
            this.getuserlist();
            this.getrolelist();
        },
        methods:{
            <%--getuserlist(){--%>
            <%--axios.get(`${apath}/sys/user/list`,{params:this.userVo})--%>
            <%--.then(({data})=>{--%>
            <%--console.log(data.result);--%>
            <%--this.data=data.result;--%>
            <%--})--%>
            <%--},--%>
            getuserlist(){
                axios.get(`${apath}/sys/user/pagelist/${this.pageSize}/${this.pageNo}`,{params:this.userVo})
                    .then(({data})=>{
                        console.log(data.result);
                        this.data=data.result.record;
                        this.total=data.result.total;
                    })
            },
            getrolelist(){
                axios.get(`${apath}/sys/role/list`)
                    .then(({data})=>{
                        this.rolelist=data.result;
                    })
            },
            // changePageSize(pagesize){
            //     console.log(pagesize)
            //     this.pageSize=pagesize;
            //     this.getuserlist();
            //
            // }
            // changeNo(pageno){
            //     this.pageNo = pageno;
            //     this.getuserlist();
            //     console.log(pageno)
            // }

        }
    })
</script>
</html>
